//导入路径
const path = require('path')
//导入webpack 这是启用热更新的第2步
const webpack = require("webpack")
//导入插件 html-webpack-plugin  只要是插件都要放到plugins里面去
const htmlWebpackPlugin = require('html-webpack-plugin')

//配置入口 出口
module.exports = {
    //入口
    entry: path.join(__dirname, './src/main.js'), //要使用webpack打包哪个文件
    //出口文件
    output: {
        path: path.join(__dirname, './dist'), //指定打包好的文件，放到哪个目录中
        filename: 'bundle.js' //指定输出的文件名称
    },
    devServer: { //这是设置dev-server的第二种方式，相对来说，这种方式麻烦一些
        open: true, //浏览器自动打开
        port: 2009, //设置端口号
        contentBase: 'src', //设置端口号后面的路径
        hot: true //启用热更新
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象，这是启用热更新的第3部
        new htmlWebpackPlugin({ //创建一个在内存中生成的一个html页面 的插件
            template: path.join(__dirname, './src/index.html'), //指定模板页面，将来会根据指定的页面路径，来生成内存中的页面
            filename: 'index.html' //指定生成的页面名称
        })
    ],
    module: { //这个节点用于配置 所有第三方的加载器模块
        rules: [
            // {test: /.js$/, use: ['babel-loader']},
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            }, /*解析css, 并把css添加到html的style标签里*/
            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
            {
                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]'
            }, /*解析图片 字体图标*/

            {
                test: /.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }, /*解析less, 把less解析成浏览器可以识别的css语言*/
            {
                test: /.sass$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }, /*解析less, 把less解析成浏览器可以识别的css语言*/
            {
                test: /\.js$/,
                use: 'babel-loader',
                //打包除这个文件之外的文件
                exclude: path.resolve(__dirname, "./node_modules"),

            },
            {
                test: /.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js'
        }
    }

}


//webpack-dev-server 这个工具能够实现自动打包编译的功能 npm i webpack-dev-server -D
//是把这个项目安装到本地开发依赖
//1.由于我们是在本地安装的 所以无法把他当做脚本命令来直接运行 只有那些安装在全局的才能在终端中正常运行